﻿<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <style>
        ::selection{
            color: #9400D3;
            BACKGROUND: #A9A9A9;
        }
        #myLog{
            float: left;
			height: 100%;
            display: block;

        }
		#hah{
			border-bottom: solid 1px black;
			width:250px;
			margin-bottom: 16px;
		}
		.cont{
			height: 18px;
			overflow: hidden;
            text-overflow: ellipsis;
            white-space:nowrap; /*强制在一行显示*/
		}
        #display{
            margin: auto;
            display: none;
        }
        .inputArea{
            text-align: center;
            border: 1px solid gray;
            height:30px;
            width:500px;
        }
        .textarea{
            text-align: left;
            text-indent:28px;
            height:380px;
			overflow: scroll;
        }
        a{
            text-decoration: none;
        }
        #search{
            position: relative;
            padding-top: 3px;
            height: 35px;
            width: 330px;
        }
        #input{
            left: 2px;
            position: absolute;
            font-size: 20px;
            width: 250px;
            height:25px;
            background: #FFFFFF;
            border: 1px solid #CCCCCC;
        }
        #go{
            font-size: 14px;
            color: black;
            position: absolute;
            left: 258px;
            width: 70px;
            height: 30px;
            cursor: pointer;
            background: red;
            border: 1px solid;
            border-radius: 5px;
        }
    </style>
    <script type="text/javascript" src="javascripts/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="javascripts/xheditor.min.js"></script>
    <script type="text/javascript" src="javascripts/xheditor_lang/zh-cn.js"></script>
  </head>
  <body style="background-image:url(./img/9.jpg);display:flex;">
        <div style="right:0;position:absolute;"><a href="./home"><img style="width:40px;height:40px;" src="img/home.png" alt="返回主页" /></a></div>
    <div id="myLog">
		<h1>日志列表</h1>
        <div id="search">
            <input type="text" id="input" placeholder="支持按标题和内容模糊查找" onkeydown="enterInput(event);" />
            <input type="button" id="go" value="搜索日志"/>
        </div>
		<%  for(var i=1; i<=Math.ceil(totalSource.length/8); i++) {%>
			<a value="<%= i %>" href="./logList?page=<%= i %>"> <%= i %></a>
		  <%}%>
		<%logSource.forEach(function(item) { %>
		<div id="hah" onclick="displayLog(event);">
			<div class="cont">标题：<%= item.title %></div>
			<div class="cont">作者：<%= item.author %></div>
			<div class="cont">发布时间：<%= item.time.toLocaleString() %></div>
			<div class="cont">内容：<%= item.content %></div>
		</div>
		<% }); %>
		<div id="newLog" style="color:yellow;font-size:40px;" onclick='window.open("./log","_self");return false;'>新建日志</div>
	</div>
    <div id="display">
        <input class="inputArea" type="text" placeholder="标题"  name="title" disabled/><br/><br/>
        <div id="txt" class="inputArea textarea " placeholder="正文" name="content" disabled></div><br/><br/>
    </div>
    <script>
        function displayLog(event) {
            var displayNode = document.getElementById("display");
            displayNode.style.display = "block";
            displayNode.childNodes[1].value = event.target.parentNode.childNodes[1].innerText;
            displayNode.childNodes[5].innerHTML = event.target.parentNode.childNodes[7].innerText;
            insert();
        }
        function enterInput(event) {
            //event.preventDefault(); 若阻止该默认事件，input不能输入值
            event.stopPropagation();
            if(window.event) {
                keynum = event.keyCode
            }
            else if(event.which) {
                keynum = event.which
            }
            if(keynum == 13) {
                var searchValue = document.getElementById("input").value;
                window.open("./logList?search="+searchValue,"_self");
            }
        } 
        window.onload = function() {
            var newLogNode = document.getElementById("newLog");
            setInterval(function(){
                if(newLogNode.style.transform != "rotate(8deg)") {
                    newLogNode.style.transform = "rotate(8deg)";
                }else{
                    newLogNode.style.transform = "rotate(-8deg)";
                }

            },1000);
            var searchNode = document.getElementById("go");
            searchNode.onclick = function(event) {
                event.preventDefault();
                event.stopPropagation();
                var searchValue = document.getElementById("input").value;
                window.open("./logList?search="+searchValue,"_self");
            };
        };
    </script>
  </body>
</html>
